<template>
  <div>
    <div class="pay-check"
         :style="{ padding: !isShop ? '' : '' }">
      <div class="pay-check-content"
           :style="{ width: isShop ? '50%' : '80%' }">
        <a :href="aMapAddress">
          <div class="display">
            <img src="@/assets/icon/daohang@3x.png"
                 class="shop-icon" />
            <div class="font-size-14"
                 style="color:#3D444D">导航</div>
          </div>
        </a>

        <div class="border-left"></div>
        <a :href="'tel:'+shop.tel">
          <div class="display">
            <img src="@/assets/icon/dianhua@3x.png"
                 class="shop-icon" />
            <div class="font-size-14"
                 style="color:#3D444D">电话</div>
          </div>
        </a>

      </div>
      <div class="purchase-button"
           v-if="isShop"
           @click="goPay()">立即购买</div>
    </div>
    <div class="placeholder"></div>
  </div>
</template>

<script>
export default {
	name: 'payCheck',
	props: {
		isShop: Boolean,
		shop: {
			type: Object,
			default: function () {
				return {
					tel: '',
					lon: '',
					lat: '',
					name: '',
				};
			},
		},
	},
	//监听
	watch: {
		shop: {
			handler(val) {
				this.aMapAddress = `http://uri.amap.com/marker?position=${this.shop.lon},${this.shop.lat}&name=${this.shop.address}&coordinate=gaode&callnative=1`;
			},
			immediate: true,
		},
	},
	data() {
		return {
			aMapAddress: '',
		};
	},
	mounted() {},
	methods: {
		goPay() {
			this.$emit('openDialog', true);
		},
	},
};
</script>

<style lang="scss" scoped>
.pay-check {
	justify-content: center;
	display: flex;
	overflow: center;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #ffffff;
	border-top: 1px solid #eeecec;
	box-sizing: border-box;
	padding: 0.120773rem 0rem;
	.pay-check-content {
		padding-top: 0.362319rem;
		height: 0.483092rem;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.border-left {
			width: 0.024155rem;
			height: 0.289855rem;
			background-color: #d2d2d2;
		}

		.shop-icon {
			width: 0.483092rem;
			height: 0.483092rem;
		}
	}

	.purchase-button {
		border-radius: 0.458937rem;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 0.386473rem;
		background-image: linear-gradient(#fd7e61, #f14820);
		width: 4.661836rem;
		height: 0.990338rem;
		margin-top: 0.120773rem;
	}
}
.placeholder {
	height: 1.980676rem;
}
</style>
